<template>
  <div class="item-box">
    <div class="main">
      <div class="content-box">
        <div class="title-box">
          <div v-if="data.enable == 1" class="badge" :style="{backgroundColor: testingColor}" />
          <div v-else class="badge" :style="{backgroundColor: idleColor}" />
          <span class="title">{{ data.projectName }}</span>
        </div>
        <div class="time">{{ data.LastOpen }}</div>
        <div class="row">
          <span>已测数 {{ data.alreadyTest }}</span>
          <span>待测数 {{ data.awaitTest }}</span>
        </div>
      </div>
      <div class="botton-box">
        <el-button type="primary" size="small" @click.stop="setUp()">参数设置</el-button>
        <el-button v-if="data.enable == 1" class="hl" size="small" @click="ignore()">忽略</el-button>
        <el-button v-else size="small" type="primary" @click="accredit()">申请授权</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      testingColor: '#8EBE47',
      idleColor: '#D5665C'
    }
  },
  methods: {
    setUp() {
      this.$emit('pushSetUp', this.data)
    },
    ignore() {

    },
    accredit() {

    }
  }
}
</script>

<style lang="scss" scoped>
.item-box {
  padding: 10px;
  .main {
    background-color: #fff;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #f1eeee;
    border-radius: 8px;
  }
  .content-box {
    .title-box {
      display: flex;
      align-items: center;
      height: 25px;
      .badge {
        width: 8px;
        height: 8px;
        border-radius: 4px;
        margin-right: 5px;
        // background-color: red;
      }
      .title {
        width: 80%;
        font-size: 16px;
        font-weight: 600;
      }
    }

    .time {
      height: 20px;
      font-size: 12px;
      color: #797b7e;
      margin-top: 10px;
    }
    .row {
      height: 20px;
      display: flex;
      justify-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #797b7e;
      margin-top: 10px;
    }
  }
  .botton-box {
    display: flex;
    justify-items: center;
    justify-content: flex-end;
    margin-top: 30px;
    .hl {
      background: #f5f7fa;
      border: 0px;
    }
  }
}
</style>
